<template>
    <view class="navbar" :style="{ borderBottom: isBorder ? '1px solid rgb(250, 250, 250)' : '' }">
      <view class="navbar-left">
        <slot name="left"></slot>
        <view v-if="isBack" class="left" @click="back">
          <uv-icon name="arrow-left" color="#2979ff" size="16"></uv-icon>
          <span>返回</span>
        </view>
      </view>
      <view class="navbar-center">
        <slot></slot>
      </view>
      <view class="navbar-right">
        <slot name="right"></slot>
      </view>
    </view>
  </template>
  
  <script setup>
  import { toRefs } from 'vue'
    const props = defineProps({
      isBack: {
        type: Boolean,
        default: true
      },
      isBorder: {
        type: Boolean,
        default: true
      }
    })
    const { isBack } = toRefs(props)
  
    const back = () => {
      let canNavBack = getCurrentPages()
      if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack({
          delta: 1
        })
      } else if (history.state.back === null) {
        uni.switchTab({
          url: '/pages/order/index'
        })
      } else {
        history.back()
      }
    }
  </script>
  
  <style lang="scss" scoped>
    .navbar {
      box-sizing: border-box;
      height: 80rpx;
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-left {
        flex: 1;
      }
      &-center {
        flex: 1;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &-right {
        flex: 1;
      }
      .left {
        display: flex;
        font-size: 28rpx;
        color: #007aff;
      }
    }
  </style>
  